<template>
  <view class="login-container pos-r bg-whi hp-100">
    <image class="pos-a t-0 l-0 wp-100 h-800 z-0" src="/static/images/bg.png" alt="" />
    <view class="main d-f fd-c wp-100">
      <view class="ta-c mb-60 mt-100">
        <text class="fs-60 fw-7 d-b mb-20 gradient-text">欢迎来到酷游宝</text>
        <text class="fs-32 c-666">享一站式游戏服务</text>
      </view>
      <view class="wp-100 p-40 bg-whi mt-80 br-32 wp-100">
        <view class="mt-60">
          <text class="fs-28 c-666 mb-10 d-b">手机号</text>
          <u-input class="u-input-custom" v-model="phone" type="number" placeholder="请输入手机号" maxlength="11" border="surround" />
        </view>
        <view class="mt-32">
          <text class="fs-28 c-666 mb-10 d-b">密码</text>
          <u-input
            class="u-input-custom"
            v-model="password"
            type="password"
            placeholder="请输入密码"
            :password="!showPassword"
            border="surround"
            right-icon="eye"
            :right-icon-style="{ color: '#409eff' }"
            @click-right-icon="showPassword = !showPassword"
          />
        </view>
        <view class="mt-60 mb-20">
          <u-checkbox-group v-model="agreed">
            <view class="d-f ai-c fs-28 c-666 lh-1">
              <u-checkbox name="agreement" value="agree" size="16" active-color="#F6C90E" label="我已阅读并同意" />
              <text class="c-yel ml-10" @tap="navigateToUserAgreement">用户协议</text>
              <text style="color: #999; margin: 0 8rpx">和</text>
              <text class="c-yel ml-10" @tap="navigateToPrivacy">隐私协议</text>
            </view>
          </u-checkbox-group>
        </view>
        <u-button type="warning" @click="login" :disabled="loading" :loading="loading">登录</u-button>
        <view class="d-f jc-b ta-c fs-28 c-666 mt-32">
          <text class="c-yel" @tap="navigateToForgetPassword">忘记密码</text>
          <text class="c-yel" @tap="navigateToRegister">立即注册</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { Env } from '@/baseInfo';
import { debounce } from '@/utils/debounce';
export default {
  data() {
    return {
      phone: '',
      password: '',
      showPassword: false,
      agreed: [],
      loading: false // 控制按钮是否禁用
    };
  },
  methods: {
    // 登录 - 使用防抖函数防止重复点击
    login: debounce(async function () {
      if (!this.phone || this.phone.length !== 11) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        return;
      }
      if (!this.password) {
        uni.showToast({ title: '请输入密码', icon: 'none' });
        return;
      }
      if (this.agreed.length === 0) {
        uni.showToast({ title: '请阅读并同意用户协议和隐私协议', icon: 'none' });
        return;
      }
      // 禁用按钮
      this.loading = true;
      try {
        // 调用登录API
        let data = { phoneNumber: this.phone, password: this.password, loginType: Env() === 'H5' ? '1' : '2' };
        const res = await this.$request({ url: '/app/appUser/login', data });
        if (res.code === 200) {
          // 登录成功，保存token
          uni.setStorageSync('ACCESS_TOKEN', res.data.token);
          uni.setStorageSync('userInfo', res.data);
          uni.showToast({ title: '登录成功', icon: 'success' });
          getApp().globalData.activePath = 0;
          await this.$async.delay(2000);
          await this.$request({ url: '/app/appUser/online', method: 'POST' });
          this.$tab.reLaunch('/pages/home/home');
        } else {
          uni.showToast({ title: res.msg || '登录失败', icon: 'none' });
        }
      } catch (error) {
        console.error('登录失败:', error);
        uni.showToast({ title: '登录失败，请重试', icon: 'none' });
      } finally {
        // 无论成功失败，都恢复按钮状态
        this.loading = false;
      }
    }, 500),
    // 跳转到忘记密码页面
    navigateToForgetPassword() {
      uni.navigateTo({ url: '/pages/global/forgetPassword/forgetPassword' });
    },
    // 跳转到注册页面
    navigateToRegister() {
      uni.navigateTo({ url: '/pages/global/register/register' });
    },
    // 跳转到隐私协议页面
    navigateToPrivacy() {
      uni.navigateTo({ url: '/pages/global/privacy/privacy' });
    },
    // 跳转到用户协议页面
    navigateToUserAgreement() {
      uni.navigateTo({ url: '/pages/global/userAgreement/userAgreement' });
    }
  }
};
</script>
<style scoped lang="scss">
.login-container {
  padding: 40rpx;
  box-sizing: border-box;
  .main {
    position: absolute;
    height: 100%;
    padding-top: 100rpx;
    box-sizing: border-box;
    top: 0;
    left: 0;
  }
}
// 文字渐变和动画效果
.gradient-text {
  // 设置文字渐变
  background-image: linear-gradient(90deg, #ff6b6b, #ffd166, #06d6a0, #118ab2, #073b4c);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  // 应用主动画，控制多种动画效果的交替展示
  animation: combinedAnimation 28s ease-in-out infinite;
}

@keyframes combinedAnimation {
  // 第1部分：滑动入场（0-10%）
  0% {
    opacity: 0;
    transform: translateX(-100%);
    background-position: 0% 50%;
  }
  10% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  // 第2部分：颜色渐变滑动（10-30%）
  30% {
    opacity: 1;
    transform: translateX(0) scale(1);
    background-position: 100% 50%;
  }

  // 第3部分：淡入淡出（30-50%）
  40% {
    opacity: 0.5;
    transform: translateX(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  // 第4部分：旋转（50-70%）
  60% {
    opacity: 1;
    transform: translateX(0) rotate(5deg) scale(1);
  }
  70% {
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
  }

  // 第5部分：弹性弹跳（70-85%）
  75% {
    opacity: 1;
    transform: translateX(0) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translateX(0) scale(0.9);
  }
  85% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  // 第6部分：闪缩效果（85-95%）
  88% {
    opacity: 1;
    transform: translateX(0) scale(1.1);
  }
  91% {
    opacity: 1;
    transform: translateX(0) scale(0.9);
  }
  94% {
    opacity: 1;
    transform: translateX(0) scale(1.05);
  }
  95% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  // 第7部分：回到初始状态并准备下一轮动画（95-100%）
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    background-position: 0% 50%;
  }
}
</style>
